<template>
    <div class="rank">
        <div class="title">
            <p class="">排行榜</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="echart" ref="echart"></div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import *as echarts from 'echarts'

let echart=ref()
onMounted(()=>{
    let myEchart=echarts.init(echart.value)
    myEchart.setOption({
        tooltip:{
            show:true
        },
        xAxis: {
            type: 'category',
        },
        yAxis: {
            type: 'value'
        },
        series: [
            //柱状图
            {
                data: [120, 190, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground :true,
                emphasis :{
                    disabled:true
                },
                itemStyle:{
                    borderRadius:[15,15,0,0],
                    color:function(data:any){
                        let arr=['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                        return arr[data.dataIndex]
                    }
                },
                backgroundStyle:{
                    color:{
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 0.5,
                        colorStops: [{
                            offset: 0, color: 'RGB(215, 255, 255)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'RGB(140, 255, 255)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                    
                },
                label:{
                    show:true,
                    position:'top'
                }
            },
            //折线图
            {
                type:'line',
                data:[50,60,80,100,120,140,160],
                itemStyle:{
                    color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                smooth:true
            }
        ],
        
        animationDuration:2000
    })
})
</script>

<style scoped lang='scss'>
.rank{
    
    flex: 1.2;
    background: url('../../images/dataScreen-main-cb.png') no-repeat;
        background-size: 100% 100%;
        .title{
            margin-top: 5px;
            margin-left: 10px;
            p{
                color: white;
                font-size: 20px;
            }
            
        }
        .echart{
            width: 100%;
            height: 90%;
        }
}
</style>